<template>
  <div class="me">
       <div class="user">
         <div class="info">
           <a-avatar :size="64" icon="user" :src="userInfo.avatar" />
           <div class="name">
             <b>{{userInfo.name}}</b>
             <p>
               <span>{{getLevel()}}</span>
               <span>{{userInfo.phone}}</span>
             </p>
           </div>
           <a-icon type="form" />
         </div>
       </div>

       <div class="service">
         <div class="user-level">
           <div class="slider">
             <b>{{userInfo.star}}</b>
             <i class="iconfont icon-xing"></i>
             <a-slider :marks="marks" :default-value="userInfo.star*4" />
           </div>
         </div>

         <!-- 我的好礼券和星礼卡 -->
      <div class="card">
        <div class="my-ticket">
          <div>
            <b>0</b>
            张
          </div>
          <p>我的好礼券<a-icon type="right" /></p>
        </div>
        <div class="my-card">
          <div>
            <b>0</b>
            张
          </div>
          <p>我的星礼卡<a-icon type="right" /></p>
        </div>
      </div>

       <!-- 我的星巴克 -->
      <div class="my-starbucks">
        <b>我的星巴克</b>
        <div>
          <img src="../assets/imgs/me-prize.png" alt="我的奖品" />
          <img src="../assets/imgs/me-coffe.png" alt="咖啡号" />
          <img src="../assets/imgs/me-gift.png" alt="我的礼物" />
        </div>
      </div>
      <div class="commonly-service">
      <b>常用功能</b>
      <service v-for="(item, index) in datas" :key="index" :serviceInfo="item"></service>
      </div>
    </div>
  </div>
</template>

<script>
import addressUrl from "../assets/imgs/service/address.png";
import folderUrl from "../assets/imgs/service/folder.png";
import attentionUrl from "../assets/imgs/service/attention.png";
import customerServiceUrl from "../assets/imgs/service/customerService.png";
import legalUrl from "../assets/imgs/service/legal.png";
import Service from '../components/Service.vue';
export default {
  components: { Service },
  data() {
    return {
      marks:{
        0:"银星级",
        16:"玉星级",
        80:"金星级"
      },
      datas:[
        {
          imgUrl: addressUrl,
          name: "地址管理",
          path: "Address",
        },
        {
          imgUrl: folderUrl,
          name: "发票管理",
          path: "Address",
        },
        {
          imgUrl: attentionUrl,
          name: "关注公众号",
          path: "Address",
        },
        {
          imgUrl: customerServiceUrl,
          name: "在线客服",
          path: "Address",
        },
        {
          imgUrl: legalUrl,
          name: "条款政策",
          path: "Address",
        },
      ]
    }
  },
  methods: {
    getLevel(){
      
    }
  },
  computed:{
    userInfo(){
      return this.$store.getters.userInfo;
    }
  }
}

</script>
<style lang="scss" scoped>
b {
  font-size: 1.5rem;
  color: $font-color;
}
.me {
  width: 100%;
  height: 100%;
  .user {
    height: 15rem;
    background-image: url("../assets/imgs/bg-userInfo.png");
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .info {
      padding: $common-padding;
      width: 100%;
      height: 6rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .name {
        height: 100%;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        flex-grow: 1;
        margin-left: $common-margin;
        b {
          color: #fff;
        }
        p {
          margin: 0px;
        }
      }
      i {
        font-size: 1.5rem;
      }
    }
  }
}
.service {
  padding: $common-padding;
  color: #888;
  position: relative;
  top: -4rem;
  .user-level {
    width: 100%;
    height: 6rem;
    background: $module-color;
    padding: $common-padding;
    border-radius: $common-border-radius;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: $common-margin;
    .slider {
      width: 100%;
      padding: $common-padding;
      .iconfont {
        color: $font-color;
      }
    }
  }
  .card {
    margin-bottom: $common-margin;
    display: flex;
    justify-content: space-between;
    .my-ticket,
    .my-card {
      width: 48%;
      height: 7rem;
      padding: $common-padding;
      background: $module-color;
      border-radius: $common-border-radius;
      b {
        font-size: 2.5rem;
        color: $starbucks-color;
      }
      p {
        margin: 0px;
        font-size: 1rem;
        color: $font-color;
      }
    }
  }
  .my-starbucks {
    height: 10rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: $common-padding;
    background: $module-color;
    border-radius: $common-border-radius;
    margin-bottom: $common-margin;
    div {
      display: flex;
      justify-content: space-around;
      img {
        width: 7rem;
      }
    }
  }
  .commonly-service {
    padding: $common-padding;
    background: $module-color;
    border-radius: $common-border-radius;
    margin-bottom: $common-margin;
  }
}
</style>